/*
 * Chart tooltips
 */
.charts-css {

  .tooltip {
    // Position
    position: absolute;
    z-index: 1;

    bottom: 50%;
    left: 50%;
    transform: translateX(-50%); // translateX for both bar & column chart

    width: max-content;
    padding: 5px 10px;
    border-radius: 6px;

    // Visibility
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s;

    background-color: #555;
    color: #fff;
    text-align: center;
    font-size: .9rem;
  }

  .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent;
  }

  td:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }

}
